<template>
	<div class="tinymce-box">
	  <editor v-model="textContent" :init="init"></editor>
	</div>
  </template>
  
  <script>
  import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme' // 主题文件
  import 'tinymce/icons/default'
  import 'tinymce/models/dom'

  import 'tinymce/plugins/image' // 插入上传图片插件
  import "tinymce/plugins/importcss"; //图片工具
  import 'tinymce/plugins/media' // 插入视频插件
  import 'tinymce/plugins/table' // 插入表格插件
  import 'tinymce/plugins/lists' // 列表插件
  import "tinymce/plugins/charmap"; // 特殊字符
  import 'tinymce/plugins/wordcount' // 字数统计插件
  import "tinymce/plugins/codesample"; // 插入代码
  import "tinymce/plugins/code"; // 查看源码
  import "tinymce/plugins/fullscreen"; //全屏
  import 'tinymce/plugins/link' //
  import 'tinymce/plugins/preview' // 预览
  import "tinymce/plugins/template"; //插入模板
  import 'tinymce/plugins/save' // 保存
  import "tinymce/plugins/searchreplace"; //查询替换
  import "tinymce/plugins/pagebreak"; //分页
  import "tinymce/plugins/insertdatetime"; //时间插入
  export default {
	name: "Tinymce",
	components: {Editor},
	props: {
	  content: {
		type: String,
		default: ''
	  },
	  disabled: {
		type: Boolean,
		default: false
	  },
	},
	data() {
	  return {
		init: {
			language_url: './static/tinymce/zh_CN.js',
			language: 'zh_CN',
			height: 400,
			skin_url: './static/tinymce/skins/ui/oxide',
			content_css: './static/tinymce/skins/content/default/content.min.css',
			plugins: [
			'link','lists','image','code', 'table', 'wordcount', 'media'
			],
			toolbar: 'bold italic underline strikethrough fontsizeselect forecolor backcolor alignleft aligncenter alignright alignjustify bullist numlist link unlink image media table code removeformat',
			branding: false,
			convert_urls:false,
			menubar: true,
			promotion: false,
			images_upload_handler: (blobInfo, progress) =>  new Promise((resolve, reject) => {
				let formdata = new FormData()
				formdata.append('file', blobInfo.blob())
				formdata.append('edit', true)
				this.$axios.post('/admin/Upload/upload', formdata).then(res => {
					resolve(res.data.data.data)
				})
			}),
		},
		textContent: this.content
	  }
	},
	watch: {
	  	content (newValue) {
			this.textContent = newValue
	  	},
	  	textContent (newValue) {
			this.$emit('update:content', newValue)
	  	}
	},
	mounted() {
	  tinymce.init({})
	},
}
</script>

  